<script>
export default {

}
</script>

<template>
  <view text="white" class="p-3 !px-4 important:p-10 -m-4">
    <view flex justify-center w-full>
      <view class="w-100 h-100 bg-cover mb-3" style="background-image: url(../../static/logo.png)" />
    </view>

    <view flex justify-center w-full>
      <view class="w-100 h-100 bg-cover mb-3 bg-[url(https://img.cdn.sugarat.top/mdImg/MTY2ODA4OTc3MjcyMg==unocss-icon-gray.svg)]" />
    </view>

    <view class="bg-[--l-tab-bar-bg-color] [--l-tab-bar-bg-color:theme(color.bg)] w-100 h-100" />
    <view class="mt-2 bg-[--l-tab-bar-bg-color,theme(color.bg)] w-100 h-100" />
    <view :class="{ 'mt-2 bg-[--l-tab-bar-bg-color,theme(color.bg)] w-100 h-100': 1 === 1 }" />

    <view class="center h-200 rounded-md bg-gradient-to-t from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-t
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-tr from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-tr
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-r from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-r
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-br from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-br
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-b from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-b
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-bl
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-l from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-l
    </view>

    <view class="center h-200 rounded-md bg-gradient-to-tl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 mb-3">
      to-tl
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>
